<template>
  <div class="content">
    <div class="topContent">
      <div class="topBox">
        <div class="topLeft">座席标签分析</div>
        <div class="topRight">
<!--          没有接口隐藏掉-->
          <t-button theme="primary" v-if="false">
            <span>导出本页</span>
            <span style="margin-left: 8px">
            <svg-icon
                :name="'icon-arrowTD'"
                class-name="arrowTD-svg-icon"
            ></svg-icon>
          </span>
          </t-button>
        </div>
      </div>
      <div class="line"></div>
      <div class="formBox">
        <t-form
            v-show="!isFold"
            ref="form"
            :data="formData"
            :layout="'inline'"
            scroll-to-first-error="smooth"
            :class="isFold ? '' : 'paddingBottom'"
        >
          <t-form-item label="选择平台" name="platform" :label-width="68" requiredMark>
            <t-select
                placeholder="请选择所属平台"
                v-model="formData.platform"
                @change="onPlatformChange"
                :options="platformOptions"
                filterable>
              <!--              <t-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value" />-->
            </t-select>
          </t-form-item>

          <t-form-item label="所属企业" name="company" :label-width="68" requiredMark v-show="formData.platform !== 1">
            <t-select v-model="formData.company" :filter="filterMethod" @change="onCompanyChange" placeholder="请选择所属企业">
              <t-option v-for="item in companyOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId" />
            </t-select>
          </t-form-item>

          <!--          // 1.0 机构-->
          <t-form-item label="所属机构" name="org" :label-width="68" requiredMark v-if="formData.platform !== 1">
            <t-select v-model="formData.org" :filter="filterMethod" @change="onOrgChange" placeholder="请选择所属机构">
              <t-option v-for="item in orgOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId" />
            </t-select>
          </t-form-item>

          <!--          TNCs 机构-->
          <t-form-item label="所属机构" name="org" :label-width="68" requiredMark v-if="formData.platform === 1">
            <t-select v-model="formData.org" :filter="filterMethod" @change="onOrgChange" placeholder="请选择所属机构">
              <t-option v-for="item in orgOptions" :key="item.id" :label="item.projectName" :value="item.id" />
            </t-select>
          </t-form-item>

          <t-form-item label="所属部门" name="branch" :label-width="68" requiredMark v-show="formData.platform !== 1">
            <t-select v-model="formData.branch" :filter="filterMethod" @change="onBranchChange" placeholder="请选择所属部门">
              <t-option v-for="item in branchOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId"  />
            </t-select>
          </t-form-item>

          <t-form-item :class="formData.platform === 1 ? 'shortForm' : ''" style="width: 50%">
            <t-space size="small" style="gap: 10px;">
              <div class="timeType">
                <span class="timeCheck" @click="timeClick('today')">今天</span>
                <span class="timeCheck" @click="timeClick('yesterday')">昨天</span>
                <span class="timeCheck" @click="timeClick('oneMonth')">一月</span>
                <span>时间</span>
              </div>
              <t-date-picker
                  v-model="formData.startTime"
                  placeholder="选择开始时间"
                  valueType="YYYY-MM-DD"
                  :disable-date="(date) => setDateStart(formData.endTime, date)"
              />
              <t-date-picker
                  v-model="formData.endTime"
                  placeholder="选择结束时间"
                  valueType="YYYY-MM-DD"
                  :disable-date="(date) => setDateEnd(formData.startTime, date)"
              />
            </t-space>
          </t-form-item>

          <t-form-item label="选择模版" name="templateId" :label-width="56">
            <t-select v-model="formData.templateId" placeholder="请选择模版">
              <t-option v-for="item in templateOptions" :key="item.id" :label="item.templateName" :value="item.id" />
            </t-select>
          </t-form-item>

          <t-form-item class="formHandleBox" v-if="!isFold">
            <t-space size="small" style="gap: 10px;">
              <t-button @click="handleQuery" class="queryBtn hoverBlue">查询</t-button>
              <t-button class="resetBtn hoverLightBlue" @click="handleReset">重置</t-button>
              <span class="arrowCont">
                 <svg-icon
                     @click="handleArrow"
                     :name="'icon-arrowTD'"
                     class-name="arrowTD-svg-icon"
                     :style="isFold === true ? '' : 'transform: rotate(180deg)'"
                 ></svg-icon>
              </span>
            </t-space>
          </t-form-item>
        </t-form>
        <!--      展开-->
        <div class="upArrow" v-show="isFold">
          <svg-icon
              @click="handleArrow"
              :name="'icon-arrowTD'"
              class-name="arrowTD-svg-icon"
              :style="isFold === true ? '' : 'transform: rotate(180deg)'"
          ></svg-icon>
        </div>
      </div>
    </div>
    <div class="chartBox">
      <div class="title_chart">
        <div class="left_t">全部通话（直方图）</div>
        <div class="right_t">总标签 {{chartState.toolTagNum}}</div>
      </div>
      <seats-chart-one :chartData="chartState.chartData"></seats-chart-one>
      <div class="emptyBox" v-if="chartState.chartData.length === 0">
        <svg-icon
            :name="'icon-emptyTable'"
            class-name="emptyTable-svg-icon"
        ></svg-icon>
        <span>暂无数据</span>
      </div>
    </div>
    <div class="chartBox_m">
      <div class="title_chart">
        <div class="left_t">全部通话（桑基图）</div>
        <div class="right_t">总标签 {{chartState.toolTagNum}}</div>
      </div>
      <seats-chart-two :chartData="chartState.chartData"></seats-chart-two>
      <div class="emptyBox" v-if="chartState.chartData.length === 0">
        <svg-icon
            :name="'icon-emptyTable'"
            class-name="emptyTable-svg-icon"
        ></svg-icon>
        <span>暂无数据</span>
      </div>
    </div>
    <div class="chartBox_rect">
      <div class="title_chart">
        <div class="left_t">全部通话（矩形图）</div>
        <div class="right_t">总标签 {{chartState.toolTagNum}}</div>
      </div>
      <seats-chart-three :chartData="chartState.chartData" v-if="chartState.chartData.length !== 0"></seats-chart-three>
      <div class="emptyBox" v-if="chartState.chartData.length === 0">
        <svg-icon
            :name="'icon-emptyTable'"
            class-name="emptyTable-svg-icon"
        ></svg-icon>
        <span>暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import SeatsChartOne from './components/seatsChartOne.vue'
import SeatsChartTwo from './components/seatsChartTwo.vue'
import SeatsChartThree from './components/seatsChartThree.vue'
import {cc0AgencyList, platform, getTemplate, cc0SeatsList, TNCsAgencyList, cc2AgencyList} from "../../api/commonApi";
import cache from '@/utils/cache.js'
import { usePageStore } from '@/pinia/page.js'
import { getTypeData, setDateStart, setDateEnd } from '@/hooks/useCheckDate.js'
const store = usePageStore()

import {analyzeInfo} from "../../api/dataAnalysis";

const pageInstance = getCurrentInstance()

// 获取平台list
const platformOptions = ref([])
// 获取模版list
const templateOptions = ref([])
const getTemplateOptions = () => {
  let id = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
  getTemplate(id).then(res => {
    if(res.code === 0) {
      templateOptions.value = res.data
    }
  })
}

onMounted(() => {
  platformOptions.value = platform()
  // 默认选择 平台
  defaultSelection()
  // 获取模版数据
  getTemplateOptions()
})

// 有值默认选中
const defaultSelection = async () => {
  let formState = store.quality_form_id
  if(formState.platform !== null) { // 获取企业
    await getCompanyList(formState.platform)
    formData.platform = formState.platform
  } else {
    onPlatformChange(0)
  }
  if(formState.company) { // 获取机构
    if(formData.platform === 0) {
      await getOrgList(formState.company)
    } else if (formData.platform === 2) {
      await getOrgList2(formState.company)
    }
    formData.company = formState.company
  }
  if(formState.org) { // 获取部门
    if(formData.platform === 0) {
      await getBranchList(formState.org)
    } else if (formData.platform === 2) {
      await getBranchList2(formState.org)
    }
    formData.org = formState.org
  }
  if(formState.branch) {
    formData.branch = formState.branch
    await handleQuery()
  }
}

// form 表单
const formData = reactive({
  userAgencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
  platform: null, // 默认选择平台 1.0
  company: '',
  org: '',
  branch: '',
  startTime: '',
  endTime: '',
  templateId: '',
});

const companyOptions = ref([]) // 企业options
const orgOptions = ref([]) // 机构options
const branchOptions = ref([]) // 部门options
// 选择平台事件
const onPlatformChange = (type) => {
  store.setFormCondition(type, '', '', '')
  formData.company = ''
  companyOptions.value = []
  formData.org = ''
  orgOptions.value = []
  formData.branch = ''
  branchOptions.value = []
  handleReset()
  getCompanyList(type)
}
const getCompanyList = (type) => {
  if(type === 0) { // 企业请求 1.0 接口
    let data = {
      agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
    }
    cc0AgencyList(data).then(res => {
      companyOptions.value = res.data
    })
  } else if(type === 1) { // 机构请求 TNCs 接口
    TNCsAgencyList().then(res => {
      orgOptions.value = res.data
    })
  } else if(type === 2) { // 企业请求 2.0 接口
    let data = {
      agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
    }
    cc2AgencyList(data).then(res => {
      companyOptions.value = res.data
    })
  }
}
// 选择企业事件
const onCompanyChange = (type) => {
  store.setFormCondition(formData.platform, type, '', '')
  formData.org = ''
  orgOptions.value = []
  formData.branch = ''
  branchOptions.value = []
  // 获取机构options
  if(formData.platform === 0) {
    getOrgList(type)
  } else if (formData.platform === 2) {
    getOrgList2(type)
  }
}
const getOrgList = (type) => {
  let data = {
    agencyId: type
  }
  cc0AgencyList(data).then(res => {
    orgOptions.value = res.data
  })
}
const getOrgList2 = (type) => {
  let data = {
    agencyId: type
  }
  cc2AgencyList(data).then(res => {
    orgOptions.value = res.data
  })
}

// 机构选择事件
const onOrgChange = (type) => {
  store.setFormCondition(formData.platform, formData.company, type, '')
  formData.branch = ''
  branchOptions.value = []
  if(formData.platform === 0) {
    getBranchList(type)
  } else if (formData.platform === 2) {
    getBranchList2(type)
  }
}
const getBranchList = (type) => {
  let data = {
    agencyId: type
  }
  cc0AgencyList(data).then(res => {
    branchOptions.value = res.data
  })
}
const getBranchList2 = (type) => {
  let data = {
    agencyId: type
  }
  cc2AgencyList(data).then(res => {
    branchOptions.value = res.data
  })
}
// 部门选择事件
const onBranchChange = (type) => {
  store.setFormCondition(formData.platform, formData.company, formData.org, type)
}
// 时间选择事件
const timeClick = (type) => {
  formData.startTime = getTypeData(type, false).startTime
  formData.endTime = getTypeData(type, false).endTime
}

// 查询
const chartState = reactive({
  toolTagNum: 0,
  chartData: [], //
})
const handleQuery = () => {
  if(formData.platform === 0 || formData.platform === 2) { // 1.0 | 2.0
    if(formData.company === '') return MessagePlugin.error('请选择企业！')
    if(formData.org === '') return MessagePlugin.error('请选择机构！')
    if(formData.branch === '') return MessagePlugin.error('请选择部门！')

    formData.projectId = formData.branch
    console.log('formData', formData)
    analyzeInfo(formData).then(res => {
      if(res.code === 0) {
        chartState.chartData = res.data
        chartState.toolTagNum = 0
        res.data.forEach(item => {
          chartState.toolTagNum += item.count * 1
        })
      }
    })
  } else if(formData.platform === 1) { // TNCs
    if(formData.org === '') return MessagePlugin.error('请选择机构！')
    formData.projectId = formData.org
    console.log('formData', formData)
    analyzeInfo(formData).then(res => {
      if(res.code === 0) {
        chartState.chartData = res.data
        chartState.toolTagNum = 0
        res.data.forEach(item => {
          chartState.toolTagNum += item.count * 1
        })
      }
    })
  }
};
// 重置
const handleReset = () => {
  formData.startTime = ''
  formData.endTime = ''
  formData.templateId = ''
}

let isFold = ref(false)
const handleArrow = () => {
  isFold.value = !isFold.value
}

const filterMethod = (search, option) => {
  return option.label.indexOf(search) !== -1 || option.value.indexOf(search) !== -1
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  overflow: hidden;
  background-color: #EBECED !important;
  padding: 8px;
  overflow-y: auto;

  .topContent {
    background-color: white;
    border-radius: 4px;

    .topBox {
      height: 65px;
      display: flex;
      padding: 20px 20px 17px 20px;

      .topLeft {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }

      .topRight {
        margin-left: auto;

        :deep(.t-button) {
          width: 88px;
          height: 28px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(227, 238, 255, 1);
          border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
          padding: 0;
          font-size: 12px;
          font-weight: 400;
          color: rgba(30, 117, 254, 1);
        }

        .arrowTD-svg-icon {
          height: 16px;
          width: 16px;
          cursor: pointer;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    .line {
      height: 0;
      opacity: 1;
      background: rgba(204, 204, 204, 1);
      border: 1px solid rgba(239, 242, 245, 1);
      margin: 0 20px;
    }

    .formBox {
      padding: 0 20px;

      :deep(.t-form) {
        padding: 20px 0 20px 0;

        .t-form-inline {
          row-gap: 16px !important;
        }

        .t-form__item {
          width: 25%;
          height: 28px;
          margin-right: 0 !important;
          padding-right: 10px;

          .t-range-input {
            height: 28px;
          }

          .t-form__label--right {
            text-align: left;
            padding-right: 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }

          .t-select__wrap {
            .t-input {
              height: 28px;
            }
          }
        }

        .t-form__item:nth-child(4) {
          padding-right: 0;
        }

        .t-form__item:nth-child(5) {
          .t-form__label--right {
            display: none
          }

          .t-form__controls {
            margin-left: 0 !important;
          }

          .t-space {
            width: 100%;

            .timeCheck {
              font-size: 12px;
              font-weight: 400;
              color: rgba(30, 117, 254, 1);
              cursor: pointer;
            }
          }

          .t-space-item:nth-child(1) {
            width: 126px;
          }

          .t-space-item:nth-child(2) {
            flex: 1;
          }

          .t-space-item:nth-child(3) {
            flex: 1;
          }

          .t-date-picker {
            height: 28px;
            width: 100%;

            .t-input {
              height: 28px;
            }
          }

          .timeType {
            float: left;
            width: 126px;
            text-align: left;
            height: 28px;
            line-height: 28px;

            span {
              margin-right: 10px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.9);
            }

            span:nth-child(4) {
              margin-right: 0;
            }
          }
        }

        .t-form__item:nth-child(7) {
          padding-right: 0;
        }

        .formHandleBox {
          margin-left: auto;
          text-align: right;
          padding-right: 0;

          .t-space {
            margin-left: auto;
            justify-content: center;
            align-items: center;

            .queryBtn {
              border: none;
              width: 56px;
              height: 30px;
              opacity: 1;
              border-radius: 3px;
              background: rgba(30, 117, 254, 1);
              font-size: 12px;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              text-align: center;
            }

            .resetBtn {
              width: 56px;
              height: 30px;
              opacity: 1;
              border-radius: 3px;
              background: rgba(236, 242, 254, 1);
              border: 0.5px solid rgba(30, 117, 254, 1);
              font-size: 12px;
              font-weight: 400;
              color: rgba(30, 117, 254, 1);
              text-align: center;
            }

            .arrowCont {
              display: flex;
              justify-content: center;
              align-items: center;

              span {
                font-size: 12px;
                font-weight: 500;
                color: rgba(138, 138, 138, 1);
              }

              .arrowTD-svg-icon {
                height: 16px;
                width: 16px;
                cursor: pointer;
              }
            }
          }

          .t-form__controls {
            margin-left: 0 !important;
          }
        }
      }

      .upArrow {
        text-align: right;
        height: 20px;

        .arrowTD-svg-icon {
          height: 16px;
          width: 16px;
          cursor: pointer;
        }
      }
    }
  }
  .emptyBox {
    position: absolute;
    height: 116px;
    width: 69px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    .emptyTable-svg-icon {
      height: 62px;
      width: 69px;
    }
    span {
      font-size: 12px;
      font-weight: 400;
      color: rgba(92, 91, 91, 1);
    }
  }
  .chartBox {
    position: relative;
    width: 100%;
    height: 351px;
    margin-top: 8px;
    background-color: white;
    border-radius: 4px;
    padding: 20px 20px 0 20px;
  }
  .chartBox_m{
    position: relative;
    width: 100%;
    height: 240px;
    margin-top: 8px;
    background-color: white;
    border-radius: 4px;
    padding: 20px 20px 0 20px;
  }

  .chartBox_rect{
    position: relative;
    width: 100%;
    height: 407px;
    margin-top: 8px;
    background-color: white;
    border-radius: 4px;
    padding: 20px 20px 0 20px;
    margin-bottom: 36px;

  }

  .title_chart {
    display: flex;
    justify-content: center;
    align-items: center;
    .left_t {
      font-size: 14px;
      font-weight: 700;
      color: rgba(32, 32, 32, 1);
    }
    .right_t {
      margin-left: auto;
      font-size: 12px;
      font-weight: 400;
      color: rgba(32, 32, 32, 1);
    }
  }
}
.shortForm {
  padding-right: 0 !important;
}
.langForm {
  padding-right: 10px !important;
}
</style>
